<template>
	<view class="">
		<view style="width: 750rpx ;height: 750rpx;">
		    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" landscape></l-signature>
		</view>
		<view>
		    <button @click="onClick('clear')">清空</button>
		    <button @click="onClick('undo')">撤消</button>
		    <button @click="onClick('save')">保存</button>
		    <!-- uvue 不支持 openSmooth -->
		    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
		</view>
	</view>

</template>
<script>
	export default {
	    data() {
	        return {
	            title: 'Hello',
	            penColor: 'red',
	            penSize: 5,
	            url: '',
	            openSmooth: true
	        }
	    },
	    methods: {
	        onClick(type) {
	             if(type == 'openSmooth') {
	                 this.openSmooth = !this.openSmooth
	                 return
	             }
	            if (type == 'save') {
	                this.$refs.signatureRef.canvasToTempFilePath({
	                    success: (res) => {
	                        // 是否为空画板 无签名
	                        console.log(res.isEmpty,'res.isEmpty')
	                        // 生成图片的临时路径
	                        // H5 生成的是base64
	                        this.url = res.tempFilePath
							console.log( this.url,' this.url')
	                    }
	                })
	                return
	            }
	            if (this.$refs.signatureRef)
	                this.$refs.signatureRef[type]()
	        }
	    }
	}
</script>

<style lang="scss">
	.but {
		margin: 25px;
		line-height: 40px;
		text-align: center;
		background-color: #55aaff;
		color: #fff;
	}
</style>